/**
 * Created by Administrator on 2017/11/21.
 */
var openBox = '<div id="jcropImgBox">'+
    '<div id="shade"></div>'+
    '<div id="showImgBox">'+
    '<span id="close"></span>'+
    '<div class="imgTitle"></div>'+
    '<div class="box">'+
    '<div id="targetBox">'+
    '<img src="" alt="" id="target">'+
    '</div>'+
    '<div class="offsetBox">'+
    '<p>W <input id="w" type="number"></input></p>'+
    '<p>H <input id="h"  type="number"></input></p>'+
    '</div>'+
    '<div class="imgbtnBox">'+
    '<span id="jcropBtn">确定裁切</span>'+
    '<span  id="oldBtn">原图上传</span>'+
    '</div>'+
    '<div style="display: none;">'+
    '<label>X1 <input type="text" size="4" id="x1" name="x1"/></label>'+
    '<label>Y1 <input type="text" size="4" id="y1" name="y1"/></label>'+
    '<label>W <input type="text" size="4" id="x2" name="x2"/></label>'+
    '<label>H <input type="text" size="4" id="y2" name="y2"/></label>'+
    '</div>'+
    '</div>'+
    '</div>'+
    '</div>';
$('body').append(openBox);
var option = {
    type: 0,
    id:'',
    file: '',
    shadeClose:false,
    scale:'',
    ajaxInfo: {
        url: '',
        artworkUrl:'',
        type: 'post',
        artworkType:'post',
        contentType: false,
        processData: false,
        data: ''
    },
    call:function () {

    }
};
var jcrop = {
    select: function (res) {
        option = $.extend(option, res);
        if(!option.ajaxInfo.artworkUrl){
            $('#oldBtn').hide();
        }
        var objUrl;
        if (option.type == 0) {
            fs = new FormData();
            fs.append("attach", option.file.files[0]);
            objUrl = getObjectURL(option.file.files[0]);
            option.ajaxInfo.data = fs;
        } else if (option.type == 1) {
            objUrl = option.file;
            option.ajaxInfo.data = option.file;
        }
        selectImage(objUrl)

    }
};
$('#close').click(function () {
    $('#jcropImgBox').hide();
    jcrop_api.destroy();
    $('#targetBox').html('<img src="" alt="" id="target">');
    if(option.id){
        if (IEVersion() == -1) {
            $("#" + option.id + "").val('');
        }
    }
});
$('#jcropImgBox').on('click','#shade',function () {
    if(option.shadeClose)
        $('#close').click();
});
function IEVersion() {
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
    var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
    var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
    if (isIE) {
        var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
        reIE.test(userAgent);
        var fIEVersion = parseFloat(RegExp["$1"]);
        if (fIEVersion == 7) {
            return 7;
        } else if (fIEVersion == 8) {
            return 8;
        } else if (fIEVersion == 9) {
            return 9;
        } else if (fIEVersion == 10) {
            return 10;
        } else {
            return 6;//IE版本<=7
        }
    } else if (isEdge) {
        return 'edge';//edge
    } else if (isIE11) {
        return 11; //IE11
    } else {
        return -1;//不是ie浏览器
    }
}
function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
    }
    else if (window.URL != undefined) {
        // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    }
    else if (window.webkitURL != undefined) {
        // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
}
function selectImage(objUrl) {
    if ($('#target').attr('src') == '') {
        $('#target').attr('src', objUrl);
    } else {
        $('#target').attr('src', objUrl);
        jcrop_api.setImage(objUrl);
    }
    $('#jcropImgBox').show();
    $('#target').Jcrop({
        onChange: showCoords,
        onSelect: showCoords,
        aspectRatio: option.scale
    }, function () {
        jcrop_api = this;
        jcrop_api.setSelect([0, 0, 100, 100]);
        jcrop_api.setOptions({bgFade: true});
    });
    function showCoords(c) {
        $('#x1').val(c.x);
        $('#y1').val(c.y);
        $('#x2').val(c.x2);
        $('#y2').val(c.y2);
        $('#w').val(c.w);
        $('#h').val(c.h);
    }
}
$('#w').keydown(function (e) {
    if(e.keyCode==13)
        jcrop_api.setSelect([$('#x1').val(), $('#y1').val(), parseInt($('#x1').val())+parseInt($(this).val()), $('#y2').val()]);
});
$('#h').keydown(function (e) {
    if(e.keyCode==13)
        jcrop_api.setSelect([$('#x1').val(), $('#y1').val(), $('#x2').val(), parseInt($('#y1').val())+parseInt($(this).val())]);
});
$('#jcropBtn').click(function () {

    event.preventDefault();
    event.stopPropagation();
    var iw = $("#target").width();
    var ih = $("#target").height();
    var x1 = parseInt($('#x1').val());
    var y1 = parseInt($('#y1').val());
    // var x2 = parseInt($('#x2').val()-x1);
    // var y2 = parseInt($('#y2').val()-y1);
    var x2 = parseInt( $('#w').val());
    var y2 = parseInt($('#h').val());

    console.log(option.ajaxInfo.data);
    var url={
        imgePath :option.ajaxInfo.data,
    	x:x1,
    	y:y1,
        cutWidth :x2,
        cutHeight :y2,
    	width :iw,
    	height:ih
    }
    console.log(url)

    $.ajax({
        type: option.ajaxInfo.type,
//      contentType: false,
//      processData: false,
        url: option.ajaxInfo.url,
        data: url,
        success: function (res) {
            option.call(res);
        },
        error: function (res) {
            option.call(res);
        }
    })
});
$('#oldBtn').click(function () {
    event.preventDefault();
    event.stopPropagation();
    if (option.type == 0) {
        $.ajax({
            type: option.ajaxInfo.artworkType,
            contentType: false,
            processData: false,
            url: option.ajaxInfo.artworkUrl,
            data: option.ajaxInfo.data,
            success: function (res) {
                option.call(res);
            },
            error: function (res) {
                option.call(res);
            }
        })
    } else if (option.type == 1) {
        option.call(option.file)
    }
});


